<template>
  <el-dialog title="分配权限" :visible="showDialog" @close="closeFn">
    <el-tree
      ref="tree"
      node-key="id"
      :data="permList"
      :props="{ label: 'title' }"
      default-expand-all
      show-checkbox
      check-strictly
      check-on-click-node
    />
    <el-row type="flex" justify="center">
      <el-button type="primary" size="small" @click="addPerm">确定</el-button>
      <el-button size="small" @click="closeFn">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
// 获取权限列表
import { getPermissions, editRolesById, updateRoles } from '@/api/roles'
import { listToTree } from '@/utils/tree-tools'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false

    }
  },
  data() {
    return {
      permList: [],
      permId: [],
      permIdList: []

    }
  },
  async  created() {
    // 获取权限列表
    const res = await getPermissions()
    this.permList = listToTree(res.data, '0')
    console.log(res, 39)
  },

  methods: {
    // 获取角色的权限列表
    async  editRolesById(id) {
      this.roleId = id
      const res = await editRolesById(id)
      this.permIdList = res.data.permissions
      this.permId = this.permIdList.map(item => item.id)
      // console.log(permissions, 51)
      // console.log(this.permIdList, 52)
      // 回显
      this.$refs.tree.setCheckedKeys(this.permId)
    },
    // 确定分配
    addPerm() {
      // 获取选中选项的数据
      const permIds = this.$refs.tree.getCheckedKeys()
      updateRoles({
        'id': this.roleId,
        'permissions': permIds
      })
      this.closeFn()
    },
    closeFn() {
    // 关闭弹窗
      this.$emit('update:showDialog', false)
    }

  }

}

</script>

<style>

</style>
